<template>
    <div class="contract">
        <div class="contract-header" v-if="protocol.partyA" v-html="protocol.partyA"></div>
        <div class="contract-form">
            <div class="title">乙方</div>
            <u--form
                ref="uForm"
                labelPosition="left"
                labelWidth="150rpx"
                errorType="toast"
                :model="form"
                :rules="rules"
                :labelStyle="{
                    fontSize: '28rpx',
                }"
            >
                <u-form-item label="姓名：" prop="userName" borderBottom>
                    <u--input
                        v-model="form.userName"
                        placeholder="请输入姓名"
                        border="none"
                        maxlength="18"
                    ></u--input>
                </u-form-item>
                <u-form-item label="身份证号：" prop="idCard" borderBottom>
                    <u--input
                        v-model="form.idCard"
                        placeholder="请输入身份证号"
                        border="none"
                        maxlength="18"
                    ></u--input>
                </u-form-item>
                <u-form-item label="家庭住址：" prop="address" borderBottom>
                    <u--input
                        v-model="form.address"
                        placeholder="请输入家庭地址"
                        border="none"
                        maxlength="200"
                    ></u--input>
                </u-form-item>
                <u-form-item label="联系电话：" prop="mobile" borderBottom>
                    <u--input
                        v-model="form.mobile"
                        placeholder="请输入联系电话"
                        border="none"
                        maxlength="11"
                    ></u--input>
                </u-form-item>
            </u--form>
        </div>
        <div class="contract-content" v-if="protocol.content" v-html="protocol.content"></div>
        <div class="sign-list">
            <div class="sign-item">
                <div class="type">甲方：（盖章）</div>
                <p class="date">日期：{{ dateTime }}</p>
                <img
                    class="contract-seal"
                    v-if="protocol.contractSeal"
                    :src="protocol.contractSeal"
                />
            </div>
            <div class="sign-item">
                <div class="type">
                    乙方：
                    <u-button
                        color="#5428EC"
                        text="签字"
                        :customStyle="{
                            width: '128rpx',
                            margin: 0,
                        }"
                        @click="toSign"
                    ></u-button>
                </div>
                <div class="sign-pic">
                    <img class="img" v-if="signPic" :src="signPic" />
                </div>
                <p class="date">日期：{{ dateTime }}</p>
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from 'dayjs';
export default {
    name: 'Contract',
    props: {
        signPic: {
            type: String,
            default: () => {
                return null;
            },
        },
    },
    data() {
        return {
            protocol: {
                partyA: '',
                content: '',
                contractSeal: '',
            },
            form: {
                idCard: null,
                address: null,
                mobile: null,
            },
            rules: {
                idCard: [
                    {
                        type: 'string',
                        min: 18,
                        required: true,
                        message: '请输入正确的身份证号',
                        trigger: ['blur', 'change'],
                    },
                    {
                        validator: (rule, value) => {
                            return uni.$u.test.idCard(value);
                        },
                        message: '请输入正确的身份证号',
                        trigger: ['blur', 'change'],
                    },
                ],
                userName: {
                    type: 'string',
                    required: true,
                    message: '请输入姓名',
                    trigger: ['blur', 'change'],
                },
                address: {
                    type: 'string',
                    required: true,
                    message: '请输入家庭住址',
                    trigger: ['blur', 'change'],
                },
                mobile: [
                    {
                        type: 'string',
                        required: true,
                        min: 11,
                        message: '请输入正确的联系方式',
                        trigger: ['blur', 'change'],
                    },
                    {
                        validator: (rule, value) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '请输入正确的联系方式',
                        trigger: ['blur', 'change'],
                    },
                ],
            },
            dateTime: dayjs().format('YYYY-MM-DD'),
        };
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        setProtocol(protocol) {
            this.protocol.partyA = (protocol.partyA || '').replace(
                /<p/gi,
                '<p style="margin-top:10px;" ',
            );
            this.protocol.content = (protocol.content || '').replace(
                /<p/gi,
                '<p style="margin-top:10px;" ',
            );
            this.protocol.contractSeal = protocol.contractSeal;
        },
        async getContractInfo() {
            const validate = await this.$refs.uForm.validate();
            if (validate) {
                return this.form;
            }
        },
        toSign() {
            uni.navigateTo({
                url: '/pages/reserve/signature',
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.contract {
    padding-bottom: 120rpx;

    .contract-form {
        margin: 30rpx 0;

        .title {
            font-size: 28rpx;
            color: #2f2f2f;
            font-weight: 600;
        }
    }

    .sign-list {
        width: 100%;
        margin-top: 50rpx;
        @include flexBox(space-between, flex-start);

        .sign-item {
            width: 50%;
            height: 220rpx;
            position: relative;
            @include flexBox(space-between, flex-start, column);

            .type {
                z-index: 100;
                white-space: nowrap;
                @include flexBox(flex-start, center);
            }

            .date {
                z-index: 100;
            }

            .sign-pic {
                width: 160rpx;
                height: 80rpx;
                padding-left: 50rpx;
                position: relative;

                .img {
                    width: 80rpx;
                    height: 160rpx;
                    transform: rotate(-90deg);
                    position: absolute;
                    top: -40rpx;
                    left: 80rpx;
                }
            }

            .contract-seal {
                width: 180rpx;
                height: 180rpx;
                position: absolute;
                left: 68rpx;
                top: 4rpx;
            }
        }
    }
}

.input-placeholder {
    font-size: 28rpx;
    color: rgb(192, 196, 204);
}
</style>
